<template>
  <div class="lineEditOrShow">
    <div class="con" :style="{backgroundColor:!edit?'rgba(0,0,0,0)':''}">
      <!-- 编辑状态 -->
      <div class="item" v-for="(item,index) in stations" :key="index" v-if="edit">
        <!-- 直线 -->
        <div class="line-top" :class="item.top?'line-active':'line-noactive'" @click="handelClickLine('top',item)" :style="{backgroundColor:item.top?line.color:''}"></div>
        <div class="line-right" :class="item.right?'line-active':'line-noactive'" @click="handelClickLine('right',item)" :style="{backgroundColor:item.right?line.color:''}"></div>
        <div class="line-bottom" :class="item.bottom?'line-active':'line-noactive'" @click="handelClickLine('bottom',item)" :style="{backgroundColor:item.bottom?line.color:''}"></div>
        <div class="line-left" :class="item.left?'line-active':'line-noactive'" @click="handelClickLine('left',item)" :style="{backgroundColor:item.left?line.color:''}"></div>

        <!-- 对角线 -->
        <div class="line-top-left" :class="item.top_left?'line-active':'line-noactive'" @click="handelClickLine('top_left',item)" :style="{backgroundColor:item.top_left?line.color:''}"></div>
        <div class="line-top-right" :class="item.top_right?'line-active':'line-noactive'" @click="handelClickLine('top_right',item)" :style="{backgroundColor:item.top_right?line.color:''}"></div>
        <div class="line-bottom-left" :class="item.bottom_left?'line-active':'line-noactive'" @click="handelClickLine('bottom_left',item)" :style="{backgroundColor:item.bottom_left?line.color:''}"></div>
        <div class="line-bottom-right" :class="item.bottom_right?'line-active':'line-noactive'" @click="handelClickLine('bottom_right',item)" :style="{backgroundColor:item.bottom_right?line.color:''}"></div>
        <!-- 点 -->
        <div class="point" @click="handelClickPoint(item)" :class="item.top||item.left||item.right||item.bottom||item.top_left||item.top_right||item.bottom_left||item.bottom_right?'point-active':''" v-if="item.name" :style="{border:(item.top||item.left||item.right||item.bottom||item.top_left||item.top_right||item.bottom_left||item.bottom_right)&&item.modelId?'6px double #fff':'4px solid'+line.color,backgroundColor:item.modelId?line.color:''}"></div>
        <div class="point" @click="handelClickPoint(item)" :class="item.top||item.left||item.right||item.bottom||item.top_left||item.top_right||item.bottom_left||item.bottom_right?'point2-active':''" v-if="item.name==''||item.name==null" :style="{backgroundColor:item.top||item.left||item.right||item.bottom||item.top_left||item.top_right||item.bottom_left||item.bottom_right?line.color:''}"></div>
        <div class="name" :class="{'location-v':item.top || item.bottom  || item.bottom_right,'location-q':(item.right&&item.bottom)||(item.right&&item.top) ,'location-h':(item.left||item.right)&&!item.top&&!item.bottom}">{{item.name}}</div>
      </div>
      <!-- 非编辑状态 -->
      <div class="item" v-for="(item,index) in stations" :key="index" v-if="!edit">
        <!-- 直线 -->
        <div class="line-top" :class="item.top?'line-active':'line-noactive'" :style="{backgroundColor:item.top?line.color:'rgba(0,0,0,0)'}"></div>
        <div class="line-right" :class="item.right?'line-active':'line-noactive'"  :style="{backgroundColor:item.right?line.color:'rgba(0,0,0,0)'}"></div>
        <div class="line-bottom" :class="item.bottom?'line-active':'line-noactive'" :style="{backgroundColor:item.bottom?line.color:'rgba(0,0,0,0)'}"></div>
        <div class="line-left" :class="item.left?'line-active':'line-noactive'" :style="{backgroundColor:item.left?line.color:'rgba(0,0,0,0)'}"></div>

        <!-- 对角线 -->
        <div class="line-top-left" :class="item.top_left?'line-active':'line-noactive'" :style="{backgroundColor:item.top_left?line.color:'rgba(0,0,0,0)'}"></div>
        <div class="line-top-right" :class="item.top_right?'line-active':'line-noactive'" :style="{backgroundColor:item.top_right?line.color:'rgba(0,0,0,0)'}"></div>
        <div class="line-bottom-left" :class="item.bottom_left?'line-active':'line-noactive'" :style="{backgroundColor:item.bottom_left?line.color:'rgba(0,0,0,0)'}"></div>
        <div class="line-bottom-right" :class="item.bottom_right?'line-active':'line-noactive'" :style="{backgroundColor:item.bottom_right?line.color:'rgba(0,0,0,0)'}"></div>
        <!-- 点 -->
        <div class="point"  :class="item.top||item.left||item.right||item.bottom||item.top_left||item.top_right||item.bottom_left||item.bottom_right?'point-active':''" v-if="item.name" @click="handelClickPointToNav(item)" :style="{border:(item.top||item.left||item.right||item.bottom||item.top_left||item.top_right||item.bottom_left||item.bottom_right)&&item.modelId?'6px double #fff':'4px solid'+line.color,backgroundColor:item.modelId?line.color:''}"></div>
        <div class="point" :class="item.top||item.left||item.right||item.bottom||item.top_left||item.top_right||item.bottom_left||item.bottom_right?'point2-active':''" v-if="item.name==''||item.name==null" @click="handelClickPointToNav(item)" :style="{backgroundColor:item.top||item.left||item.right||item.bottom||item.top_left||item.top_right||item.bottom_left||item.bottom_right?line.color:'rgba(0,0,0,0)'}"></div>
        <div class="name" :class="{'location-v':item.top || item.bottom  || item.bottom_right,'location-q':(item.right&&item.bottom)||(item.right&&item.top) ,'location-h':(item.left||item.right)&&!item.top&&!item.bottom}">{{item.name}}</div>
      </div>
    </div>
    <!-- 线路编辑 -->
    <div class="edit">
      <el-form ref="form" :model="line" label-suffix="：">
        <el-form-item label="线路名称">
          <el-input v-model="line.name"></el-input>
        </el-form-item>
        <el-form-item label="线路颜色">
          <el-color-picker style="display:flex" v-model="line.color"></el-color-picker>
        </el-form-item>
        <el-form-item label="编码">
          <el-input v-model="line.code"></el-input>
        </el-form-item>
        <el-form-item style="text-align:left">
          <el-button type="primary" @click="handelClickEdit">{{edit?'完成':'编辑'}}-{{edit}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 站点编辑 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="form" :model="stationDate" label-width="120px" label-suffix="：">
        <el-form-item label="站点名称">
          <el-input v-model="stationDate.name"></el-input>
        </el-form-item>
        <el-form-item label="站点模型ID">
          <el-input v-model="stationDate.modelId"></el-input>
        </el-form-item>
        <el-form-item label="关联区段" style="text-align:left">
          <el-select v-model="stationDate.rel_station" style="width:70%" placeholder="请选择" @change="changeRelModel" filterable clearable >
            <el-option
              v-for="item in relationStations"
              :key="item.value"
              :label="item.name"
              :value="item.value"
              v-if="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区段模型ID" style="text-align:left" v-if="stationDate.rel_station">
          <el-input style="width:70%" v-model="stationDate.modelId"></el-input>
          <span>{{point.name}}-{{rel_point.name}}</span>
        </el-form-item>
        <el-form-item label="模型图片" style="text-align:left">
          <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handelClickConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: 'lineEdit',
  data () {
    return {
      dialogVisible: false,
      stationDate: {
        name: '',
        modelId: '',
        modelImage: '',
        rel_station:''
      },
      points: [],
      stations: Object.keys(Array.apply(null, { length: 300 })),
      num1: [],
      num2: [],
      edit: false,
      line: {
        name: '',
        color: '#007ACC',
        code: ''
      },
      point: {},//当前点击的站点信息,
      list:[],//存放相邻点信息
      rel_point:{}//关联想站点
    }
  },
  computed: {
    relationStations(){
      let p1 = this.point.value-1
      let p2 = this.point.value-21
      let p3 = this.point.value-20
      let p4 = this.point.value-19
      let p5 = this.point.value+1
      let p6 = this.point.value+21
      let p7 = this.point.value+20
      let p8 = this.point.value+19
      let v = [p1,p2,p3,p4,p5,p6,p7,p8]
      let list =[]
      this.stations.forEach(a=>{
        v.forEach(b=>{
          if(a.value==b){
            list.push(a)
          }
        })
      })
      let rel_station_list =list.filter(res=>{
        return res.name!==''
      })
      return rel_station_list
    }
  },
  watch: {
    dialogVisible(val){
      if(!val){
        this.stationDate.rel_station =''
      }
      
    }
  },
  mounted () {
    if(localStorage.lineData==''){
      for (let i = 0; i < this.stations.length; i++) {
      this.stations[i] = new Object()
      this.stations[i].value = i
      this.stations[i].top = false
      this.stations[i].left = false
      this.stations[i].right = false
      this.stations[i].bpttom = false
      this.stations[i].top_left = false
      this.stations[i].top_right = false
      this.stations[i].bottom_left = false
      this.stations[i].bottom_right = false
      this.stations[i].name = ''
      this.stations[i].modelId = ''
    }
    }else{
    this.stations = JSON.parse(localStorage.lineData)

    }
    
    console.log(this.stations)
  },
  methods: {
    changeRelModel(val){
      console.log(this.stations[val].name)
      this.rel_point = this.stations[val]
    },
    handelClickEdit () {
      this.edit = !this.edit
      if (this.edit) {
        console.log('线路信息', this.line)
        localStorage.lineData = JSON.stringify(this.stations)
      }
    },
    handelClickLine (type, row) {
      this.stations[row.value][type] = this.stations[row.value][type] == null || this.stations[row.value][type] == false ? true : null
      // 取消相邻的对角线
      if (type == 'top_left') {
        this.stations[row.value - 21]['bottom_right'] = this.stations[row.value - 21]['bottom_right'] == null || this.stations[row.value - 21]['bottom_right'] == false ? true : null
      }
      if (type == 'top_right') {
        this.stations[row.value - 19]['bottom_left'] = this.stations[row.value - 19]['bottom_left'] == null || this.stations[row.value - 19]['bottom_left'] == false ? true : null
      }
      if (type == 'bottom_left') {
        this.stations[row.value + 19]['top_right'] = this.stations[row.value + 19]['top_right'] == null || this.stations[row.value + 19]['top_right'] == false ? true : null
      }
      if (type == 'bottom_right') {
        this.stations[row.value + 21]['top_left'] = this.stations[row.value + 21]['top_left'] == null || this.stations[row.value + 21]['top_left'] == false ? true : null
      }
      // 取消相邻的直线
      if (type == 'top') {
        this.stations[row.value - 20]['bottom'] = this.stations[row.value - 20]['bottom'] == null || this.stations[row.value - 20]['bottom'] == false ? true : null
      }
      if (type == 'bottom') {
        this.stations[row.value + 20]['top'] = this.stations[row.value + 20]['top'] == null || this.stations[row.value + 20]['top'] == false ? true : null
      }
      if (type == 'left') {
        this.stations[row.value - 1]['right'] = this.stations[row.value - 1]['right'] == null || this.stations[row.value - 1]['right'] == false ? true : null
      }
      if (type == 'right') {
        this.stations[row.value + 1]['left'] = this.stations[row.value + 1]['left'] == null || this.stations[row.value + 1]['left'] == false ? true : null
      }
    },
    confirmEditStation () {

    },
    handelClickPointToNav(row){
      console.log(row)
      // 完成后的事件
    },
    handlePictureCardPreview () { },
    handleClose () {
      this.dialogVisible = false
    },
    handelClickPoint (val) {
      this.dialogVisible = true
      this.point = val
      this.stationDate.name = val.name
      this.stationDate.modelId = val.modelId
    },
    handelClickConfirm (val) {
      var val = this.point
      console.log('当前点击', val, typeof (val))

      // this.$prompt('请输入站点名称', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      // }).then(({ value }) => {
      //   if (typeof (val) == 'object') {
      //     this.stations[val.value].name = value
      //   } else {
      //     this.stations[val].name = value
      //   }
      // })
      if (typeof (val) == 'object') {
        this.stations[val.value].name = this.stationDate.name
        this.stations[val.value].modelId = this.stationDate.modelId
      } else {
        this.stations[val].name = this.stationDate.name
        this.stations[val].modelId = this.stationDate.modelId
      }
      if (typeof (val) == 'object') {
        this.points.push(val.value)
      } else {
        this.points.push(val)
      }
      this.points = this.checkArray(this.points)
      console.log('this.points', this.points)
      var res = this.points.findIndex(e => {
        return e == val + 10
      })
      console.log('res', res)

      for (let i = 0; i < this.points.length; i++) {
        for (let j = 1; j < this.points.length; j++) {


          if (this.points[j] - this.points[i] == 1) {

            this.stations.forEach((e, index) => {
              if (e.value == this.points[j] && e.left !== null) {
                this.stations[index] = Object.assign(this.stations[index], {
                  value: this.points[j],
                  left: true
                })
              }
              if (e.value == this.points[i] && e.right !== null) {
                this.stations[index] = Object.assign(this.stations[index], {
                  value: this.points[i],
                  right: true
                })
              }
            })


          }
          if (this.points[j] - this.points[i] == 20) {
            this.stations.forEach((e, idx) => {
              if (e.value == this.points[j] && e.top !== null) {
                this.stations[idx] = Object.assign(this.stations[idx], {
                  value: this.points[j],
                  top: true
                })
              }
              if (e.value == this.points[i] && e.bottom !== null) {
                this.stations[idx] = Object.assign(this.stations[idx], {
                  value: this.points[i],
                  bottom: true
                })
              }
            })
          }

          if (this.points[j] - this.points[i] == 19) {
            this.stations.forEach((e, idx) => {
              if (e.value == this.points[j] && e.top_right !== null) {
                this.stations[idx] = Object.assign(this.stations[idx], {
                  value: this.points[j],
                  top_right: true
                })
              }
              if (e.value == this.points[i] && e.bottom_left !== null) {
                this.stations[idx] = Object.assign(this.stations[idx], {
                  value: this.points[i],
                  bottom_left: true
                })
              }
            })
          }
          if (this.points[j] - this.points[i] == 21) {
            this.stations.forEach((e, idx) => {
              if (e.value == this.points[j] && e.top_left !== null) {
                this.stations[idx] = Object.assign(this.stations[idx], {
                  value: this.points[j],
                  top_left: true
                })
              }
              if (e.value == this.points[i] && e.bottom_right !== null) {
                this.stations[idx] = Object.assign(this.stations[idx], {
                  value: this.points[i],
                  bottom_right: true
                })
              }
            })
          }
        }

      }
      this.stations = JSON.parse(JSON.stringify(this.stations))
      console.log('stations', this.stations)
      this.dialogVisible = false
    },
    checkArray (arr) {
      var result = [];
      for (var i = 0, len = arr.length; i < len; i++) {
        if (result.indexOf(arr[i]) == -1) {
          result.push(arr[i]);
        }
      }
      return result.sort(function (a, b) {
        return a - b;
      });
    }

  }
}
</script>

<style lang="stylus">
.lineEditOrShow {
  width 100%
  display flex
  flex-direction row
  .edit {
    display flex
    flex 1
    flex-direction column
    margin-left 10px
  }
}
.con {
  width 1200px
  height 900px
  background-color #f5f5f5
  display flex
  flex-wrap wrap
  overflow hidden
  .item {
    display flex
    width 60px
    height 60px
    align-items center
    justify-content center
    position relative
    .line-top {
      position absolute
      height 50%
      width 10px
      top 0
      z-index 9
    }
    .line-right {
      position absolute
      height 10px
      width 50%
      right 0
      z-index 9
    }
    .line-bottom {
      position absolute
      height 50%
      width 10px
      bottom 0
      z-index 9
    }
    .line-left {
      position absolute
      height 10px
      width 50%
      left 0
      z-index 9
    }
    .line-top-left {
      position absolute
      height 42.4264px
      width 10px
      bottom 30px
      transform rotate(-45deg)
      background #eee
      transform-origin 50% 100%
    }
    .line-top-right {
      position absolute
      height 42.624px
      width 10px
      transform rotate(45deg)
      background #eee
      bottom 30px
      transform-origin 50% 100%
    }
    .line-bottom-left {
      position absolute
      height 42.624px
      width 10px
      transform rotate(45deg)
      background #eee
      top 30px
      transform-origin 50% 0
    }
    .line-bottom-right {
      position absolute
      height 42.4264px
      width 10px
      top 30px
      transform rotate(-45deg)
      background #eee
      transform-origin 50% 0
    }
    .line-active {
      background-color #007ACC
      z-index 99
    }
    .line-noactive {
      background-color #eee
    }
    .point {
      position absolute
      width 10px
      height 10px
      border-radius 50%
      background #ffffff
      display flex
      align-items center
      justify-content center
      cursor pointer
      color #ccc
      font-size 10px
      z-index 99
    }
    .point2-active {
      background-color #007ACC
      z-index 99
      width 10px
      height 10px
      border-radius inherit
    }
    .point-active {
      background-color #fff
      // border 3px solid #ffffff
      color #ffffff
      border 4px solid #fff
    }
    .name {
      position absolute
      color #000
      font-size 14px
      z-index 100
      white-space nowrap
      top 0
    }
    .location-h {
      top 0
    }
    .location-v {
      left 45px
      top auto
    }
    .location-q {
      left 40px
      top 40px
    }
  }
}
</style>